.flexibleButtonGroup {
	display: flex;
	flex-wrap: wrap;
	
	> li {
		display: flex;
		flex: 0 0 auto;
		
		&:not(:last-child) {
			margin-right: 5px;
			
			&.spaceAfter {
				margin-right: 20px;
			}
		}
		
		> input[type="radio"] {
			left: -3000px;
			opacity: 0;
			position: absolute;
			
			&:checked + label {
				cursor: default;
				
				> .icon {
					cursor: default !important;
				}
			}
			
			&:focus + label {
				border-color: rgba(0, 0, 0, .3);
			}
		}
		
		> a,
		> label {
			background-color: rgb(207, 216, 220);
			border: 1px solid transparent;
			color: rgb(33, 33, 33);
			cursor: pointer;
			padding: 5px 10px;
			
			> .icon {
				color: inherit;
			}
			
			> .icon {
				color: inherit !important;
				cursor: pointer !important;
			}
		}
		
		> a.active,
		> input[type="radio"]:checked + label,
		> input[type="radio"] + label:hover {
			color: #fff;
			
			&.green {
				background-color: rgb(46, 125, 50);
			}
			
			&.red {
				background-color: rgb(198, 40, 40);
			}
			
			&.yellow {
				background-color: rgb(251, 140, 0);
				color: #000;
			}
		}
	}
}

.disabled .flexibleButtonGroup > li > input[type="radio"]:checked + label,
.flexibleButtonGroup > li > input[type="radio"]:disabled + label {
	background-color: rgb(242, 242, 242) !important;
	color: rgb(125, 130, 100) !important;
	cursor: default;
	
	> .icon {
		color: rgb(125, 130, 100) !important;
		cursor: default !important;
	}
}
